<template>
  <div class="announceList-container">
    <div class="app-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span class="title">通知公告</span>
          <div class="form">
            <el-form
              :inline="true"
              :model="queryForm"
              ref='queryForm'
              :rules='queryRules'
              class="demo-form-inline"
            >
              <el-form-item prop='title'>
                <el-input
                  clearable
                  v-model.trim="queryForm.title"
                  placeholder="请输入标题关键字"
                  @keyup.enter.native="getQueryFn()"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="getQueryFn()"
                >查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 列表 -->
        <el-table
          stripe
          :data='announceList'
          style="width: 100%"
          @row-click="(row)=>$router.push(
            {
              path: `/announcement/info/${row.id}`,
            })"
        >
          <el-table-column
            prop="title"
            min-width="500"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="ctime"
            min-width='100'
          >
            <template v-slot="{ row }">
              {{ new Date(row.ctime).toLocaleString() }}
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px; margin-top: 40px;"
          v-if="total > query.pagesize"
        >
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-size="query.size"
            layout="prev, pager, next, jumper"
            :total="total"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAnnounceListAPI, queryAnnounceAPI } from '@/api'
export default {
  name: 'announceList',
  data () {
    return {
      queryForm: {
        title: ''
      },
      queryRules: {
        title: [
          {
            min: 1,
            max: 50,
            type: 'string',
            message: '标题要求1-50个字符',
            trigger: 'change'
          }
        ]
      },
      query: {
        page: 1, // 页码
        pagesize: 10 // 每页条数
      },
      announceList: [],
      total: 0 // 数据总条数
    }
  },
  created () {
    this.getAnnounceListFn() // 获取通知公告列表
  },
  methods: {
    // 每页显示的条数发生改变时触发
    handleSizeChange (newSize) {
      this.query.size = newSize
      this.getAnnounceListFn() // 获取通知公告列表
    },
    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getAnnounceListFn() // 获取通知公告列表
    },
    // 获取通知公告列表 -> 发送请求
    async getAnnounceListFn () {
      try {
        const { success, code, data } = await getAnnounceListAPI(this.query)
        if (success && code === 10000) {
          this.announceList = data.row
          this.total = data.total
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 根据输入title模糊查询
    async getQueryFn () {
      try {
        const { success, code, data } = await queryAnnounceAPI({
          ...this.query,
          ...this.queryForm
        })
        if (success && code === 10000) {
          this.announceList = data.row
          this.total = data.total
        }
      } catch (err) {
        return console.dir(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.clearfix {
  display: flex;
}
.form {
  text-align: right;
  flex-grow: 1;
}
.title {
  flex-grow: 0;
}
</style>
